<template>
  <el-dialog
    v-if="load"
    :title="title"
    v-model="visible"
    align-center
    width="600px"
    @close="handleClose"
  >
    <MultipleColumns
      v-model="list"
      :disabled="disabled"
      :type="type"
      operation_type="all"
    ></MultipleColumns>
    <template #footer>
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="submit">保 存</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { deepClone } from "@/utils/index";
import MultipleColumns from "./MultipleColumns";
const data = reactive({
  load: false,
  visible: false,
  type: "",
  list: [],
  title: "",
});

const { load, visible, type, list, title } = toRefs(data);

const emit = defineEmits(["confirm"]);

const typeMap = new Map([
  ["goods_sku_sell_month", "热卖月份"],
  ["custom_specification", "自定义规格"],
  ["goods_sku_authentication", "认证类型"],
  ["goods_sku_prohibited_sales", "禁售平台"],
]);
// 打开弹窗
const open = async (data) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  type.value = data.type;
  title.value = typeMap.get(type.value);
  list.value = deepClone(data.list);
  visible.value = true;
};
// 关闭弹窗
const handleClose = () => {
  visible.value = false;
};
// 提交
const submit = () => {
  emit("confirm", {
    type: type.value,
    list: list.value,
  });
  handleClose();
};

defineExpose({ open });
</script>
